<template>
    <div class="charts-box">
      <qiun-vue-ucharts
          type="pie"
          :opts="opts"
          :chartData="chartData"
      />
    </div>
    <!--  222222-->
    <div class="charts2-box">
      <qiun-vue-ucharts
          type="mount"
          :opts="opts2"
          :chartData="chartData2"
      />
    </div>


</template>

<script>
// 需要在您的项目内执行 npm i @qiun/vue-ucharts
import qiunVueUcharts from '@qiun/vue-ucharts'
import { getPatientByDoctorName } from '@/api/system/appointment'
import { listDoctors,getDoctorsNameByDepartment } from "@/api/system/doctors";
import { listDepartments } from "@/api/system/departments"

export default {
  components: {
    qiunVueUcharts
  },

  data() {
    return {
      chartData: {},

      chartData2: {},

      doctorList: [],
      patientNumber: [],

      doctorsList: [],
      doctorsNumber: [],
      departmentList: [],
      //您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [5,5,5,5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      },
    // 22222
      opts2: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,15,0,5],
        enableScroll: true,
        legend: {},
        xAxis: {
          itemCount: 29,
          scrollShow: true,  // 确保滚动显示开启
          scrollAlign: 'left',
          boundaryGap: true  // 尝试添加这个
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ]
        },
        extra: {
          mount: {
            // type: "mount",
            widthRatio: 0.8
          },
          queryParams:{
            pageNum: 1,
            pageSize: 100
          }
        }
      }
    };
  },
  mounted() {
    this.getServerData();
    this.getServerData2();
    this.fetchDoctorData();
    this.getList()
  },

  methods: {
    fetchDoctorData() {
      listDoctors().then(async response => {
        this.doctorList = response.rows.map(doctor => doctor.name)
        this.patientNumber = []
        for (let i = 0; i < this.doctorList.length; i++) {
          await getPatientByDoctorName(this.doctorList[i]).then(response => {
            this.patientNumber.push(response)
          })
        }
        // 数据获取完成后，重新加载图表数据
        this.getServerData();
      })
    },

    /** 查询科室信息列表 */
      async getList() {
        this.loading = true;
          const response = await listDepartments(this.queryParams);
          this.departmentsList = response.rows;
          this.total = response.total;
          console.log(response)
          for (let i = 0; i < this.departmentsList.length; i++) {
            const doctors = await getDoctorsNameByDepartment(this.departmentsList[i].departmentName);
            this.doctorsList.push(doctors);
            this.doctorsNumber.push(doctors.length);
            this.departmentList.push(this.departmentsList[i].departmentName);
          }
          this.departmentsList = this.departmentsList.map((item, index) => ({
            ...item,
            doctorName: this.doctorsList[index].toString()
          }));

          this.loading = false;

      },

    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        // 确保数据已经获取
        if (this.doctorList && this.patientNumber &&
            this.doctorList.length === this.patientNumber.length) {
          // 创建符合uCharts要求的数据格式
          const seriesData = this.doctorList.map((doctor, index) => {
            return {
              name: doctor,
              value: this.patientNumber[index]
            };
          });
          this.chartData = {
            series: [{
              data: seriesData
            }]
          };
        }
      }, 500);
    },

    getServerData2() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        const seriesData = this.departmentList.map((department, index) => {
          return{
            name: this.departmentList[index],
            value: this.doctorsNumber[index],
          }
        });
        this.chartData2 = {
          series: [{
            data: seriesData
          }]
        };
      }, 500);
    },
  }
};

</script>

<style scoped>
.d1{
  display: flex;
}

.charts-box {
  width: 500px;
  height: 300px;
}

.charts2-box {
  width: 1000px;
  height: 300px;
}
</style>

